<template>
	<view class="page-content">
		<view class="page-body">
			<view class="body-box">
				<view class="body-box-tit">当前选择城市</view>
				<view class="body-box-con1" @click="toindex2">
					<view class="body-box-con-txt">{{city}}</view>
					<!-- <view class="body-box-con-r" @click="getLocation">
						<image class="dingwei" src="../../static/clockIn/dingwei.png"></image>重新定位</view> -->
				</view>
			</view>
			<view class="body-box">
				<view class="body-box-tit">城市列表</view>
				<view class="body-box-con">
					<block v-for="(item,index) in list" :key="index">
						<view class="body-box-con-txt"  @click="toindex(item)">{{item.name}}</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getcitys  //城市
	} from '@/common/api.js'
	export default {
		components: {
			
		},
		data() {
			return {
				city:'',
				list:[]
			}
		},
		computed: {
		},
		onShow() {
			this.getdata();
		},
		onLoad(option) {
			console.log(222,option)
			if(option.city){
				this.city  = option.city;
			}
			
		},
		methods: {
			toindex2(){
				let _self = this;
				if(_self.list.length>0){
					_self.list.forEach(item =>{
						if(item.city === _self.city){
							uni.setStorageSync('sel_city', item);
						}
					})
				}
				uni.reLaunch({
					url: `/pages/index/index`
				})
			},
			toindex(item){
				uni.setStorageSync('sel_city', item);
				uni.reLaunch({
					url: `/pages/index/index`
				})
			},
			// #ifdef MP-WEIXIN
			getLocation() {
				console.log('重新定位')
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: (res) => {
						let _self = this
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.request({
							header: {
								"Content-Type": "application/text"
							},
							//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
							url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
								res.longitude + ',' + res.latitude +
								'&key=4e05aff7258c0b784f5df8de49d23740&radius=1000&extensions=all',
							success(res2) {
								console.log(444,res2)
								if (res2.statusCode === 200) {
									_self.city = res2.data.regeocode.addressComponent.city
									// if(_self.list.length>0){
									// 	_self.list.forEach(item =>{
									// 		if(item.city === res2.data.regeocode.addressComponent.city){
									// 			uni.setStorageSync('sel_city', item);
									// 		}
									// 	})
									// }
								} else {
									console.log("获取位置信息失败，请重试！")
								}
							}
						});
					}
				});
			},
			//#endif
			getdata(){
				getcitys().then(res =>{
					console.log(333,res)
					if(res.code  === 2000){
						this.list = res.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.dingwei{
		//margin-top: 4rpx;
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	.page-content{
		width: 100vw;
		display: flex;
		flex-direction: column;
		.page-body{
			margin: 30rpx 0;
			.body-box{
				display: flex;
				flex-direction: column;
				
				.body-box-tit{
					padding:20rpx 30rpx;
					font-size: 26rpx;
					color: #888;
				}
				.body-box-con1{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx;
					background: #fff;
					font-size: 28rpx;
					color: #02BB6F;
					.body-box-con-r{
						display: flex;
						align-items: center;
					}
				}
				.body-box-con{
					display: flex;
					flex-direction: column;
					padding: 30rpx;
					background: #fff;
					font-size: 28rpx;
					color: #333;
					.body-box-con-txt{
						line-height: 60rpx;
						font-size: 28rpx;
						color: #333;
						border-bottom: 1rpx  solid #f5f5f5;
					}.body-box-con-txt:last-of-type{
						border-bottom: none;
					}
				}
			}
		}
	}
</style>
